<template>
  <el-page-header @back="goBack">
    <template #content>
      <span > 修改学生信息 </span>
    </template>
  </el-page-header>
  <el-divider></el-divider>
  <el-form style="width: 360px;">
    <el-form-item label="学号">
      <el-input type="text" v-model="student.studentNo" 
      readonly placeholder="学号" />
    </el-form-item>
    <el-form-item label="姓名">
      <el-input type="text" v-model="student.name" placeholder="姓名" />
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="student.gender">
        <el-radio value="男">男</el-radio>
        <el-radio value="女">女</el-radio>      
      </el-radio-group>
    </el-form-item>
    <el-form-item label="出生日期">
      <el-date-picker
        v-model="student.dob"
        type="date"
        placeholder="选择出生日期"
      />
    </el-form-item>
    <el-form-item label="班级" style="align-items: center;">
      <el-select
        v-model="student.studentClass"
        placeholder="选择班级"       
      >
        <el-option
          v-for="c in clazz"
          :key="c"
          :label="c"
          :value="c"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="手机号">
      <el-input type="text" v-model="student.mobileNumber"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button 
      round type="primary" @click="onSaveButtonClick">保存      
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import router from '@/router.js'

const props = defineProps({
  studentNo: String
});

const clazz = ref([
  '软件212', '软件213', '软件214'
])

const student = ref({});

onMounted(async () => {
  const api = '/api/students/get-student';
  try {
    let res = await axios.get(api, {
      params: {
        "student-no": props.studentNo
      }
    })
    student.value = res.data;
  } catch(err) {
    ElMessage({
      message: '访问数据失败',
      type: 'error',
      showClose: true,
      duration: 0
    })
    console.error(err);
  }  
})

async function onSaveButtonClick() {
  const api = '/api/students/edit-student';
  try {
    await axios.post(api, student.value);
    ElMessage({
      message: '更新学生信息成功',
      type: 'success'
    })
  } catch (err) {
    ElMessage({
      message: '更新学生信息失败',
      type: 'error',
      showClose: true,
      duration: 0
    })
  }
  
}

function goBack() {
  router.push('/students');
}
</script>